<!--
 * @FilePath: SchoolDeviceAlert.vue
 * @Author: jack
 * @Date: 2024-07-31 11:23:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-11 10:30:44
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div :style="'width: 100%;height:' + centerTableHeight + 'px;'">
        <div class="tabBox" ref="centerTabRef">
            <div class="suntitle">异常总数 {{ tableData.length }}</div>
            <el-button class="botton" :loading="loading" @click="Export">{{ loading ? '正在导出,请稍等' : '导出数据' }}</el-button>
        </div>
        <div style="position: relative;">
            <div class="loading-flex-box" v-show="listLoading">
                <dv-loading>加载中...</dv-loading>
            </div>
            <el-table :data="tableData" size="small" v-if="centerTabHeight != 0" :border="false"
                :height="Number(centerTableHeight) - Number(centerTabHeight)"
                style="width: 100%;background: transparent;" :header-cell-style="headerCellstyle" stripe
                class="elTable">
                <el-table-column prop="schoolName" show-overflow-tooltip label="学校" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.schoolName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="trunkPhone" show-overflow-tooltip label="号码" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.trunkPhone }}</span>
                    </template>
                </el-table-column>

                <el-table-column width="120" prop="vendorName" show-overflow-tooltip label="运营商/厂商" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.vendorName ? scope.row.vendorName : '-' }}</span>/<span>{{
    scope.row.yysName
                            ? scope.row.yysName : '-' }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="yysName" show-overflow-tooltip label="厂商" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.yysName ? scope.row.yysName : '-' }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column prop="art_title" width="240" show-overflow-tooltip label="预警内容" :filters="selectType"
                    :filter-method="filterTag" filter-placement="bottom-end" align="center">
                    <template v-slot="scope">
                        <span style="color: #FF9800;">{{ scope.row.alertInfo }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="alertTime" width="180" show-overflow-tooltip label="预警时间" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.alertTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="phoneName" width="130" show-overflow-tooltip label="位置" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.phoneName ? scope.row.phoneName : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="deviceId" show-overflow-tooltip label="设备ID" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.deviceId }}</span>
                    </template>
                </el-table-column>
                <template slot="empty" v-if="isNodata">
                    <NoDate title="暂无数据"></NoDate>
                </template>
            </el-table>
        </div>
    </div>
</template>
<script>
// 引入防抖函数
export default {
    name: 'SchoolDeviceAlert',
    props: {
        schoolList: {
            type: Array,
            default: []
        },
        centerTableHeight: {
            type: Number,
            default: 0
        },
        personQuery: {
            type: Object,
            default: {}
        },
        moduleIndex: {
            type: Number,
            default: 1
        },
    },
    data() {
        return {
            centerTabHeight: 0,
            listLoading: true, // 加载中
            tableData: [],
            isNodata: true,
            loading: false,
            selectType: [],
            typeList: [{ text: '有超长话单', value: 'too_long_call' },
            { text: '短话单率高', value: 'short_call' },
            { text: '接通失败率高', value: 'fail_call' },
            { text: '无拨打记录', value: 'not_call' },
            { text: '日均通话低', value: 'less_call' }]
        }
    },
    watch: {
        moduleIndex: {
            async handler(newVal) {
                this.centerTabHeight = this.$refs.centerTabRef.clientHeight
            }
        },
    },
    methods: {
        filterTag(value, row) {
            return row.alertType === value
        },
        // 单元格表头的设置
        headerCellstyle({ row, column, rowIndex, columnIndex }) {
            return 'background:#082667!important;color: #FFFFFF;font-size: 12px;'
        },
        // 获取学校通话量列表数据
        async getDeviceAlertList() {
            this.listLoading = true;
            const params = {
                yys: this.personQuery.yys,
                linkType: this.personQuery.linkType,
                school: this.personQuery.school,
                vendor: this.personQuery.vendor,
                startDay: this.personQuery.startDay,
                endDay: this.personQuery.endDay,
                period: this.personQuery.periodStart && this.personQuery.periodEnd ? this.personQuery.periodStart + '-' + this.personQuery.periodEnd : '',
            }
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/querySchoolDeviceAlert', {
                params: params
            })
            this.tableData = res
            this.selectType = JSON.parse(JSON.stringify(this.typeList))
            this.selectType.forEach(item => {
                item.text = `${item.text}（${this.sameIdCount(item.value)}）`
            })
            this.isNodata = this.tableData.length > 0 ? false : true
            this.listLoading = false
        },
        sameIdCount(key) {
            let count = 0
            this.tableData.forEach(item => {
                if (item.alertType === key) {
                    count++
                }
            });
            return count
        },
        // 导出数据
        async Export() {
            this.loading = true
            const params = {
                yys: this.personQuery.yys,
                linkType: this.personQuery.linkType,
                school: this.personQuery.school,
                vendor: this.personQuery.vendor,
                startDay: this.personQuery.startDay,
                endDay: this.personQuery.endDay,
                period: this.personQuery.periodStart && this.personQuery.periodEnd ? this.personQuery.periodStart + '-' + this.personQuery.periodEnd : '',
            }
            this.$http({
                methods: 'get',
                url: '/TalkScreen/Api/HlPhone/querySchoolDeviceAlertExport',
                responseType: 'blob',
                params: params
            }).then(res => {
                var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
                var downloadElement = document.createElement('a')
                var href = window.URL.createObjectURL(blob) // 创建下载的链接
                downloadElement.href = href
                downloadElement.download = '异常设备清单.xls' // 下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() // 点击下载
                document.body.removeChild(downloadElement) // 下载完成移除元素
                window.URL.revokeObjectURL(href) // 释放掉blob对象
                this.loading = false
            })
        }
    },
    mounted() {
    }
}
</script>
<style lang="less" scoped>
/deep/ .el-button.is-loading:before {
    display: none;
}
</style>
